<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <content-block>
        <div>
          <!-- 查询条件 -->
          <el-form :model="searchForm" label-width="100px" class="search-form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="人员编号">
                  <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input v-model="searchForm.aac003" placeholder="请输入姓名" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8" class="text-right" style="float: right">
                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </content-block>
      <content-block>
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
          <el-alert
            v-if="true"
            type="info"
            description="提示：1.需手动输入日期时格式为：2000-01-01;"
            style="top: -10px"
            show-icon
          />
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="证件类型" prop="aac058">
                  <el-select v-model="form.aac058" placeholder="请选择" style="width: 220px">
                    <el-option v-for="item in dict.aac058" :key="item.id" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号码" prop="aac002">
                  <el-input v-model="form.aac002" maxlength="18" style="width: 220px" @blur="aac002Change" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="老身份证号码" prop="aac002_l">
                  <el-input v-model="form.aac002_l" style="width: 190px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="aac003">
                  <el-input v-model="form.aac003" style="width: 220px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="民族" prop="aac005">
                  <el-select v-model="form.aac005" placeholder="请选择" filterable allow-create style="width: 230px">
                    <el-option
                      v-for="item in dict.aac005"
                      :key="item.id"
                      :value="item.value"
                      :label="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期" prop="aac006">
                  <el-date-picker v-model="form.aac006" format="yyyy-MM-dd" type="datetime" style="width: 210px" :editable="true" :clearable="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!--                <el-form-item label="档案出生日期" prop="aac327">-->
                <!--                  <el-date-picker v-model="form.aac327" format="yyyy-MM-dd" type="datetime" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="性别" prop="aac004">
                  <el-select v-model="form.aac004" placeholder="请选择" filterable allow-create style="width: 220px">
                    <el-option
                      v-for="item in dict.aac004"
                      :key="item.id"
                      :value="item.value"
                      :label="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="参工日期" prop="aac007">
                  <el-date-picker v-model="form.aac007" format="yyyy-MM-dd" type="datetime" style="width: 220px" :editable="true" :clearable="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="账户类型" prop="aae473">
                  <el-select v-model="form.aae473" placeholder="请选择" style="width: 190px">
                    <el-option v-for="item in dict.aae473" :key="item.id" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="户口性质" prop="aac009">
                  <el-select v-model="form.aac009" placeholder="请选择" style="width: 220px">
                    <el-option v-for="item in dict.aac009" :key="item.id" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="户口地址" prop="aac010">
                  <el-input v-model="form.aac010" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="居住地址" prop="aae006">
                  <el-input v-model="form.aae006" style="width: 550px" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="aac067">
                  <el-input v-model="form.aac067" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="备注">
                  <el-input v-model="form.aae013" style="width: 550px" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <crudOperation :permission="permission" />
        <el-alert
          v-if="true"
          title="温馨提示"
          type="info"
          description="新增人员参保信息：请双击表格人员基础信息"
          show-icon
        />
        <el-table ref="table" v-loading="crud.loading" :height="400" :data="crud.data" size="small" style="width: 100%;" border :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="crud.selectionChangeHandler" @row-dblclick="handleRowDblClick">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="aac003" label="姓名" width="180px" fixed="left" align="center" header-align="center" />
          <el-table-column prop="aac001" label="个人编号" width="150px" align="center" header-align="center" />
          <el-table-column prop="aac002" label="身份证号码" width="180px" align="center" header-align="center" />
          <el-table-column prop="aac002_l" label="老身份证号码" width="180px" align="center" header-align="center" />
          <el-table-column prop="aac004" label="性别" width="120px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aac005" label="民族" width="120px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aac006" label="出生日期" :formatter="formatDate" width="150px" align="center" header-align="center" />
          <!--          <el-table-column prop="aac327" label="档案出生日期" width="150px" :formatter="formatDate" align="center" header-align="center" />-->
          <el-table-column prop="aac058" label="证件类型" width="180px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aac007" label="参工日期" :formatter="formatDate" width="120px" align="center" header-align="center" />
          <!--新增-->
          <el-table-column prop="aac009" label="户口性质" width="200px" align="center" header-align="center" :formatter="formatter" />
          <el-table-column prop="aac010" label="户口地址" width="180px" align="left" header-align="center" />
          <el-table-column prop="aae006" label="居住地址" width="180px" align="left" header-align="center" />
          <el-table-column prop="aac067" label="联系电话" width="120px" align="center" header-align="center" />
          <el-table-column prop="aae473" label="账户类型" width="150px" :formatter="formatter" align="center" header-align="center" />
          <el-table-column prop="aae013" label="备注" width="200px" align="center" header-align="center" />
          <el-table-column v-if="checkPer(['admin','basicAc01:edit','basicAc01:del'])" label="操作" width="150px" align="center" fixed="right">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </content-block>
      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" title="人员参保信息" :style="{ zIndex: 1000 }" width="1300px">
        <!--      // 注入·参保信息-->
        <ac02 ref="ac02ref" :permission="permission" :aac001="aac001" style="height: 80%" @queryCallBack="queryCallBack" />
        <el-button @click="dialogVisible = false">关闭</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudBasicAc01 from '@/views/ynsb_comm/ac01/basicAc01'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import ac02 from '../ac02/index'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc'
import ContentBlock from '@/components/labers/contentBlock'
import { Alert } from 'element-ui'

const defaultForm = {
  aac001: null,
  aac002: null,
  aac002_l: null,
  aac003: null,
  aac004: null,
  aac005: null,
  aac006: null,
  aac327: null,
  aac058: '01',
  aac009: null,
  aac010: null,
  aac067: null,
  aae006: null,
  aae473: '1',
  aae013: null
}
export default {
  name: 'BasicAc01',
  // eslint-disable-next-line vue/no-unused-components
  components: { ContentBlock, PersonRpc, pagination, crudOperation, udOperation, ac02, Alert },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '人员基础信息', url: 'api/basicAc01', idField: 'aac001', sort: 'aac001,desc', crudMethod: { ...crudBasicAc01 }})
  },
  // 数据字典
  dicts: ['aac004', 'aac058', 'aae473', 'aac009', 'aac005'],
  data() {
    return {
      searchForm: {
        aac001: '', // 人员编号
        aac003: '' // 姓名
      },
      permission: {
        add: ['admin', 'basicAc01:add'],
        edit: ['admin', 'basicAc01:edit'],
        del: ['admin', 'basicAc01:del']
      },
      rules: {
        aac002: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' }
        ],
        aac003: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        aac004: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        aac005: [
          { required: true, message: '民族不能为空', trigger: 'blur' }
        ],
        aac006: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        aac007: [
          { required: true, message: '参工日期不能为空', trigger: 'blur' }
        ],
        aae473: [
          { required: true, message: '账户类型不能为空', trigger: 'blur' }
        ],
        aac058: [
          { required: true, message: '证件类型不能为空', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 控制弹窗的显示与隐藏
      selectedRow: null, // 存储被双击的行数据
      aac001: '' // 个人编号
    }
  },
  mounted() {
    this.crud.optShow.download = false
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 身份证校验
    aac002Change(val) {
      if (this.form.aac058 === '01') {
        if (this.form.aac002.length !== 15 && this.form.aac002.length !== 18) {
          this.$message.error('居民身份证不为15位或18位!')
          return
        }
        const { aac006, aac004 } = this.parseIDCard(this.form.aac002)
        this.form.aac006 = aac006
        this.form.aac004 = aac004
      }
    },
    // 根据身份证号计算出生日期和性别
    parseIDCard(idCard) {
      if (!idCard) return { aac006: null, aac004: null }

      let aac004 = ''
      let aac006 = ''

      // 处理15位身份证
      if (idCard.length === 15) {
        aac006 = `19${idCard.substr(6, 2)}-${idCard.substr(8, 2)}-${idCard.substr(10, 2)}`
        aac004 = parseInt(idCard.substr(14, 1)) % 2 === 0 ? '2' : '1'
      } else if (idCard.length === 18) { // 处理18位身份证
        aac006 = `${idCard.substr(6, 4)}-${idCard.substr(10, 2)}-${idCard.substr(12, 2)}`
        aac004 = parseInt(idCard.substr(16, 1)) % 2 === 0 ? '2' : '1'
      }

      return { aac006, aac004 }
    },
    formatter(row, column, cellValue) {
      // 根据 aae140 的值进行转码
      const key = column.property
      const data = this.dict[key]
      if (data.length === 0) {
        return cellValue
      }
      const dataList = data.filter(item => item.value === cellValue)
      console.log(dataList, 'data')
      if (dataList !== null && dataList !== [] && dataList !== undefined && dataList.length > 0) {
        return dataList[0].label
      } else {
        return cellValue
      }
    },
    personRpcCallBack(item) {
      this.form.aac001 = item.aac001
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
    },
    search() {
      // 假设查询的数据
      crudBasicAc01.getAc01({ ...this.searchForm }).then(res => {
        console.log(res, 'res')
        this.crud.data = res.content
      })
    },
    reset() {
      this.$refs.personRpc.restAac001('')
      this.searchForm = {
        aac001: '',
        aac003: ''
      }
      this.tableData = [] // 清空表格数据
    },
    queryCallBack() {
      this.dialogVisible = false // 显示弹窗
    },
    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aac001 = row.aac001
      this.selectedRow = row // 获取双击的行数据
      this.dialogVisible = true // 显示弹窗
      setTimeout(() => {
        this.$refs.ac02ref.getAc02s()
      }, 500) // 延迟1秒后显示弹窗
    },
    // 日期格式转换
    formatDate(row, column, cellValue) {
      // 格式化日期为 YYYY-MM-DD
      if (cellValue !== null && cellValue !== undefined) {
        const date = new Date(cellValue)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        return `${year}-${month}-${day}`
      } else {
        return '--'
      }
    }
  }
}
</script>

<style scoped>

</style>
